<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="formRef"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<el-form-item
					label="账单周期"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.billEndDate"
						placeholder="请选择"
						style="width: 350px"
						:popper-append-to-body="false"
						@change="changeBillEndDate"
					>
						<el-option
							v-for="item in billDateList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="数据统计:"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.proxyRange"
						size="medium"
						:placeholder="$t('common.select_all')"
						collapse-tags
					>
						<el-option
							v-for="item in accountTypeArr"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="代理账号:"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model.trim="queryData.proxyName"
						:maxlength="11"
						clearable
						:disabled="queryData.proxyRange == 1"
						autocomplete="off"
						v-symbols
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item class="flex-row-container">
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90750053')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportBtnLoading"
						@click="handleExportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
					<el-button
						type="success"
						icon="el-icon-sort"
						:disabled="loading"
						size="medium"
						@click="openColSettings"
					>
						{{ $t('common.row_set') }}
					</el-button>
				</el-form-item>
				<el-form-item>
					<el-button
						size="mini"
						:type="
							queryData.periodType == item.value ? 'primary' : ''
						"
						v-for="(item, index) in dateButtonList"
						:key="index"
						@click="getButtonDate(item.value)"
					>
						{{ item.label }}
					</el-button>
				</el-form-item>
				<div
					v-if="queryData.proxyRange !== 1"
					style="display: flex; width: 100%"
				>
					<el-checkbox
						v-model="checkAll"
						@change="handleCheckAllChange"
					>
						全选
					</el-checkbox>
					<span style="margin-left: 15px"></span>
					<el-checkbox-group
						v-model="checkedCities"
						@change="handleCheckedCitiesChange"
					>
						<el-checkbox
							v-for="city in cities"
							:label="city"
							:key="city"
						>
							{{ city }}
						</el-checkbox>
					</el-checkbox-group>
				</div>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				ref="elTable"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:max-height="tableHeight"
				:data="tableData"
				:default-sort="{
					prop: 'staticsDate',
					order: 'descending'
				}"
				:key="headKey"
				v-bind="$attrs"
				v-on="$listeners"
				:cell-class-name="cellClassName"
				:header-cell-class-name="cellClassName"
				@sort-change="changeTableSort"
				show-summary
				:summary-method="
					(val) => handleRow(val, subSummary, totalSummary)
				"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					v-for="(item, index) in newCol"
					:key="'column_' + index"
					:prop="newCol[index].prop"
					:align="item.alignCenter"
					:label="item.label"
					:min-width="item.minWidth"
					:fixed="item.isFixed"
					:sortable="item.isSortColumn"
					:show-overflow-tooltip="item.isShowTip"
				>
					<!-- 通过插槽为表头绑定mousedown和dragover方法 -->
					<template slot="header" slot-scope="{ column, $index }">
						<span
							@mousedown="
								handleMounseDown($event, column, $index)
							"
							@dragover="handleDragover($event, column, $index)"
							v-if="item.itemTipContent"
						>
							{{ item.label }}
							<el-tooltip
								class="item"
								effect="dark"
								:content="item.itemTipContent"
								placement="top-start"
							>
								<i class="el-icon-question"></i>
							</el-tooltip>
						</span>
						<span
							@mousedown="
								handleMounseDown($event, column, $index)
							"
							@dragover="handleDragover($event, column, $index)"
							v-else
						>
							{{ item.label }}
						</span>
					</template>
					<template slot-scope="{ row }">
						<div v-if="item.solt === 'numberSolt'">
							<span
								:style="
									handleNumberColor(row[newCol[index].prop])
								"
							>
								{{
									handleNumber(
										'USDT',
										row[newCol[index].prop],
										2
									)
								}}
							</span>
						</div>
						<div v-if="item.solt === 'defaultSoltTime'">
							{{
								dayjs(String(row.cycleStartDate)).format(
									'YYYY-MM-DD'
								)
							}}
							00:00:00 至
							{{
								dayjs(String(row.cycleEndDate)).format(
									'YYYY-MM-DD'
								)
							}}
							23:59:59
						</div>
						<div v-if="item.solt === 'proxyLevelSolt'">
							{{ row.proxyLevel }} / {{ row.proxyLevelName }}
						</div>
						<div v-if="item.solt === 'amountAbsSolt'">
							<span>
								{{
									handleNumber(
										'USDT',
										Math.abs(row[newCol[index].prop]),
										2
									)
								}}
							</span>
						</div>
						<div v-if="item.solt === 'aloneAddLast'">
							<span
								v-if="row.shouldReceiptPaymentParentAmount > 0"
							>
								{{
									handleNumber(
										'USDT',
										Math.abs(
											row.shouldReceiptPaymentParentAmount
										),
										2
									)
								}}
							</span>
							<span v-else>$0.00</span>
						</div>
						<div v-if="item.solt === 'aloneReduceLast'">
							<span
								v-if="row.shouldReceiptPaymentParentAmount < 0"
							>
								{{
									handleNumber(
										'USDT',
										Math.abs(
											row.shouldReceiptPaymentParentAmount
										),
										2
									)
								}}
							</span>
							<span v-else>$0.00</span>
						</div>
						<div v-if="item.solt === 'aloneAdd'">
							<span
								v-if="row.personShouldReceiptPaymentAmount > 0"
							>
								{{
									handleNumber(
										'USDT',
										Math.abs(
											row.personShouldReceiptPaymentAmount
										),
										2
									)
								}}
							</span>
							<span v-else>$0.00</span>
						</div>
						<div v-if="item.solt === 'aloneReduce'">
							<span
								v-if="row.personShouldReceiptPaymentAmount < 0"
							>
								{{
									handleNumber(
										'USDT',
										Math.abs(
											row.personShouldReceiptPaymentAmount
										),
										2
									)
								}}
							</span>
							<span v-else>$0.00</span>
						</div>
						<span
							v-if="
								item.solt === 'operate' &&
								hasPermission('90750070')
							"
						>
							<el-link
								class="lightBlueColor"
								type="primary"
								@click="dialogData(row)"
							>
								查看详情
							</el-link>
						</span>
						<div v-if="item.solt === 'defaultSolt'">
							<span>
								{{ row[newCol[index].prop] || '-' }}
							</span>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size.sync="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<detail-page
			v-if="visible"
			:detailData="detailData"
			:visible="visible"
			:memberDatas="memberDatas"
			:closeDialog="
				() => {
					visible = false
				}
			"
		/>
		<el-dialog
			:title="$t('common.row_set')"
			center
			:visible.sync="colSettings.visible"
			width="475px"
			class="setting-div"
			:before-close="cancleSetColumn"
			:close-on-click-modal="false"
		>
			<div>
				<el-link type="primary" class="mb15" @click="clickDel">
					复原缺省
				</el-link>
			</div>
			<div
				v-for="(item, index) in oldCol"
				:key="index"
				class="setting-div"
			>
				<el-checkbox v-if="index !== 0" v-model="item.isShow">
					{{ item.label }}
				</el-checkbox>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancleSetColumn()">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="handleOrderList">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
		<!-- 详情弹窗 -->
		<chargeDialog
			v-if="chargeDialogVisible"
			:visible.sync="chargeDialogVisible"
			@handleVisible="chargeDialogVisible = false"
			:curData="curData"
			:queryData="childrenAjaxData"
		/>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
// import Sortable from 'sortablejs'
import { Storage } from '@/utils/compose'
import summaryList from './components/summaryList'
import { getColumns } from './components/columns'
import MainContent from '@/components/MainContent/index.vue'
import chargeDialog from './components/chargeDialog'
const setSearchTime = () => [
  dayjs()
    .subtract(0, 'day')
    .startOf('day'),
  dayjs()
    .subtract(0, 'day')
    .endOf('day')
]
export default {
  name: routerNames.memberReturnData,
  components: {
    MainContent,
    chargeDialog
  },
  mixins: [list, summaryList],
  data() {
    return {
      dayjs,
      tableHeight: 480,
      chargeDialogVisible: false,
      otherDependenComponents: [],
      accountTypeArr: [
        {
          value: 1,
          label: '全部总代'
        },
        {
          value: 2,
          label: '指定代理'
        }
      ],
      cities: ['仅看自身', '直属下级', '全部下级'],
      checkAll: false,
      checkedCities: ['仅看自身'],
      searchTime: setSearchTime(),
      curData: '',
      queryData: {
        proxyRange: 1,
        queryRange: '',
        periodType: 5,
        billEndDate: ''
      },
      tableData: [],
      subSummary: {},
      totalSummary: {},
      billDateList: [],
      detailData: {},
      memberDatas: [],
      visible: false,
      loading: false,
      exportBtnLoading: false,
      oldCol: [],
      dropCol: [],
      dateButtonList: [
        {
          label: '本账期',
          value: 4
        },
        {
          label: '最新账单',
          value: 5
        },
        {
          label: '近4期',
          value: 1
        },
        {
          label: '近8期',
          value: 2
        },
        {
          label: '近12期',
          value: 3
        }
      ],
      newCol: [],
      childrenAjaxData: '',
      colSettings: {
        visible: false
      },
      // 拖拽状态
      dragState: {
        start: -3, // 起始元素的 index 防止初始化cellStyle时序号、展开等默认样式改变，最好小于-3
        end: -3, // 移动鼠标时所覆盖的元素 index
        dragging: false, // 是否正在拖动
        direction: undefined // 拖动方向
      },
      headKey: 'agentRebateData', // 表头数组变换位置时，重绘table（不更新该值，表头数组变化时，页面不会改变）
      scrollX: 0 // 初始x轴scroll位置（用于定位X轴滚动条）
    }
  },
  computed: {},
  watch: {
    oldCol: {
      handler(newVal) {
        if (newVal) {
          setTimeout(() => {
            this.newCol = newVal.filter((its) => {
              return its.isShow === true
            })
          }, 1000)
        }
      },
      deep: true
    }
  },
  created() {
    const storageColumn = this.getSaveTableData()
    this.dropCol = getColumns()
    const uu_Id = this.$store.state.user.userInfo?.id
    this.oldCol =
      storageColumn &&
        storageColumn[`${uu_Id}_commonTableKey_agentTeamBill`]
        ? storageColumn[`${uu_Id}_commonTableKey_agentTeamBill`]
        : this.dropCol
    this.newCol = this.oldCol
  },
  mounted() {
    this.getSettlementBillTimeList()
  },
  methods: {
    changeBillEndDate() {
      this.queryData.periodType = 6 // 置空
    },
    getButtonDate(val) {
      this.queryData.periodType = val
      this.queryData.billEndDate = ''
      this.queryData.cycleStartDate = ''
      this.queryData.cycleEndDate = ''
      if (val == 4) {
        this.queryData.billEndDate = 0
      } else {
        if (this.billDateList.length > 1) {
          if (val == 5) {
            this.queryData.billEndDate = 1
          } else if (val == 1) {
            this.queryData.billEndDate = this.billDateList.length - 3
          } else if (val == 2) {
            this.queryData.billEndDate = this.billDateList.length - 2
          } else if (val == 3) {
            this.queryData.billEndDate = this.billDateList.length - 1
          }
        } else {
          this.queryData.billEndDate = ''
        }
      }
      this.loadData()
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : []
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length
    },
    handleShortcutBtnClick(val) {
      this.searchTime = val
      this.loadData()
    },
    getSettlementBillTimeList() {
      this.loading = true
      const params = {
        pageNum: 1,
        pageSize: 200,
        periodType: 6
      }
      this.$api
        .proxyTeamBillPeriod(params)
        .then((res) => {
          this.loading = false
          if (res?.code === 200) {
            const { record } = res?.data
            if (record.length > 1) {
              this.billDateList = record.map(
                (item, index) => {
                  const startTime = dayjs(String(item.periodStDate)).format('YYYY-MM-DD') + ' 00:00:00'
                  const endTime = dayjs(String(item.periodEnDate)).format('YYYY-MM-DD') + ' 23:59:59'
                  return {
                    code: index,
                    description: `${startTime} 至 ${endTime}`,
                    periodStDate: item.periodStDate,
                    periodEnDate: item.periodEnDate,
                    periodStStr: startTime,
                    periodEnStr: endTime
                  }
                }
              )
              if (this.billDateList.length > 4) {
                this.billDateList.push({
                  code: record.length,
                  description: `${this.billDateList[4].periodStStr} 至 ${this.billDateList[1].periodEnStr} (近4期)`,
                  periodStDate: this.billDateList[4].periodStDate,
                  periodEnDate: this.billDateList[1].periodEnDate
                })
              } else {
                this.billDateList.push({
                  code: record.length,
                  description: `${this.billDateList[record.length - 1].periodStStr} 至 ${this.billDateList[1].periodEnStr} (近4期)`,
                  periodStDate: this.billDateList[record.length - 1].periodStDate,
                  periodEnDate: this.billDateList[1].periodEnDate
                })
              }
              if (this.billDateList.length > 8) {
                this.billDateList.push({
                  code: record.length + 1,
                  description: `${this.billDateList[8].periodStStr} 至 ${this.billDateList[1].periodEnStr} (近8期)`,
                  periodStDate: this.billDateList[8].periodStDate,
                  periodEnDate: this.billDateList[1].periodEnDate
                })
              } else {
                this.billDateList.push({
                  code: record.length + 1,
                  description: `${this.billDateList[record.length - 1].periodStStr} 至 ${this.billDateList[1].periodEnStr} (近8期)`,
                  periodStDate: this.billDateList[record.length - 1].periodStDate,
                  periodEnDate: this.billDateList[1].periodEnDate
                })
              }
              if (this.billDateList.length > 12) {
                this.billDateList.push({
                  code: record.length + 2,
                  description: `${this.billDateList[12].periodStStr} 至 ${this.billDateList[1].periodEnStr} (近12期)`,
                  periodStDate: this.billDateList[12].periodStDate,
                  periodEnDate: this.billDateList[1].periodEnDate
                })
              } else {
                this.billDateList.push({
                  code: record.length + 2,
                  description: `${this.billDateList[record.length - 1].periodStStr} 至 ${this.billDateList[1].periodEnStr} (近12期)`,
                  periodStDate: this.billDateList[record.length - 1].periodStDate,
                  periodEnDate: this.billDateList[1].periodEnDate
                })
              }
              this.queryData.billEndDate = 1
              this.loadData()
            } else if (record.length == 1) {
              this.billDateList = record.map(
                (item, index) => {
                  const startTime = dayjs(String(item.periodStDate)).format('YYYY-MM-DD') + ' 00:00:00'
                  const endTime = dayjs(String(item.periodEnDate)).format('YYYY-MM-DD') + ' 23:59:59'
                  return {
                    code: index,
                    description: `${startTime} 至 ${endTime}`,
                    periodStDate: item.periodStDate,
                    periodEnDate: item.periodEnDate,
                    periodStStr: startTime,
                    periodEnStr: endTime
                  }
                }
              )
            }
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    dialogData(row) {
      let type = 0
      if (row.personShouldReceiptPaymentAmount > 0) {
        type = 1
      }
      this.curData = {
        ...row,
        type: type,
        periodType: this.queryData.periodType
      }
      this.chargeDialogVisible = true
    },
    // 鼠标摁下触发
    handleMounseDown(e, column, $index) {
      this.dragState.dragging = true
      this.dragState.start = parseInt($index - 0)
      // 添加鼠标抬起事件  消除鼠标摁下立刻松开问题
      document.addEventListener('mouseup', this.handleMouseUp)
      // 添加拖拽结束事件
      document.addEventListener('dragend', this.handleMouseUp)
      // 对选中的表头允许其拖拽
      const dragclass = '.el-table__header-wrapper .' + column.id
      const dragDom = document.querySelectorAll(dragclass)
      dragDom.forEach((dom) => {
        // 允许表头块可以被拖拽 draggable 属性 不允许拖拽dragover等相关拖拽事件无法触发
        dom.setAttribute('draggable', true)
      })
    },
    /** 鼠标在拖拽移动时触发 */
    handleDragover(e, column, $index) {
      if (this.dragState.dragging) {
        // 获取当前滚动条的位置
        const scrollDom = this.$refs.elTable.bodyWrapper
        this.scrollX = scrollDom.scrollLeft
        const index = parseInt($index - 0) // 记录起始列
        /** 实时更改鼠标处于表头的位置 */
        if (index - this.dragState.start !== 0) {
          this.dragState.direction =
            index - this.dragState.start < 0 ? 'left' : 'right' // 判断拖动方向
          this.dragState.end = parseInt($index - 0)
        } else {
          this.dragState.end = this.dragState.start
          this.dragState.direction = null
        }
      }
    },
    /** 鼠标抬起或拖拽结束触发 */
    handleMouseUp() {
      // 更新拖拽后的表头
      this.headDraged(this.dragState)
      const { end } = this.dragState
      // 初始化拖动状态
      this.dragState = {
        start: end, // 记录最后拖动的位置
        end: -9,
        dragging: false,
        direction: undefined
      }
      document.removeEventListener('mouseup', this.handleMouseUp)
      document.removeEventListener('dragend', this.handleMouseUp)
      setTimeout(() => {
        // 重置拖拽状态
        this.dragState.start = -9
      }, 500)
    },
    // 更新拖拽后的表头
    headDraged({ start, end, direction }) {
      if (direction) {
        const originColumn = this.newCol[start]
        // 有位置交换时，原先位置的元素删除，再在目标处插入
        this.oldCol.splice(start, 1)
        this.oldCol.splice(end, 0, originColumn)
        this.headKey = new Date().getTime() + '' // 更新table key值
        const uu_Id = this.$store.state.user.userInfo.id
        const uidKey = uu_Id + '_commonTableKey_agentTeamBill'
        const getLocalTableData = Storage.get('commonTableKey')
        if (getLocalTableData) {
          Storage.set(
            'commonTableKey',
            Object.assign(getLocalTableData, {
              [uidKey]: this.oldCol
            })
          )
        } else {
          Storage.set('commonTableKey', {
            [uidKey]: this.oldCol
          })
        }
        this.$nextTick(() => {
          // 因为表头重绘后滚动条会移到最左端初始位置，因此如果是在中间部分拖拽，还需要把滚动条在定位到该位置
          this.$refs.elTable.bodyWrapper.scrollLeft = this.scrollX
        })
      }
    },
    // 拖动虚线样式设置
    cellClassName({ columnIndex }) {
      const { start, end, direction } = this.dragState
      const target = columnIndex - 0
      if (target === start) {
        // 被移动的元素
        return 'drag_start'
      } else if (target === end) {
        // 要移动的位置
        return `drag_end_${direction}`
      }
      return ''
    },
    changeTableSort({ column, prop, order }) {
      this.queryData.orderKey = prop
      if (order === 'ascending') {
        // 升序
        this.queryData.orderType = 'asc'
      } else if (column.order === 'descending') {
        // 降序
        this.queryData.orderType = 'desc'
      } else {
        delete this.queryData.orderKey
        delete this.queryData.orderType
      }
      this.loadData()
    },
    loadData() {
      this.queryData.queryRange = ''
      if (this.queryData.proxyRange == 1) {
        delete this.queryData.proxyName
      }
      if (this.queryData.proxyRange == 2 && !this.queryData.proxyName) {
        this.$message.warning('请输入代理账号')
      }
      for (const index in this.checkedCities) {
        const e = this.checkedCities[index]
        const len = this.checkedCities.length - 1
        if (e == '仅看自身') {
          this.queryData.queryRange += '3'
        } else if (e == '直属下级') {
          this.queryData.queryRange += '2'
        } else if (e == '全部下级') {
          this.queryData.queryRange += '5'
        }
        if (index != len) {
          this.queryData.queryRange += ','
        }
      }
      if (this.checkedCities.length == 0) {
        this.queryData.queryRange = '2,3,5' // 全不选 等于 全选
      }
      const params = {
        ...this.queryData,
        ...this.getParams()
      }
      if ([1, 2, 3, 4, 5].includes(params.periodType)) {
        delete params.cycleStartDate
        delete params.cycleEndDate
      } else {
        delete params.periodType
        params.cycleEndDate = this.billDateList[this.queryData.billEndDate].periodEnDate
        params.cycleStartDate = this.billDateList[this.queryData.billEndDate].periodStDate
      }
      delete params.billEndDate

      this.childrenAjaxData = JSON.parse(JSON.stringify(params))
      this.loading = true
      this.$api
        .proxyTeamBillList(params)
        .then((res) => {
          this.loading = false
          if (res.code === 200) {
            this.tableData = []
            this.tableData = res?.data?.record || []
            this.total = res?.data?.totalRecord || 0
            this.subSummary = res?.data?.summary || {}
          }
        })
        .catch(() => {
          this.loading = false
        })
      this.$api
        .proxyTeamBillTotal(params)
        .then((res) => {
          this.loading = false
          if (res.code === 200) {
            this.totalSummary = res?.data || {}
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    search() {
      this.pageNum = 1
      this.loadData()
    },
    reset() {
      this.pageNum = 1
      this.queryData = {
        billEndDate: this.billDateList.length > 1 ? 1 : '',
        proxyRange: 1,
        queryRange: '',
        periodType: 5
      }
      this.searchTime = setSearchTime()
      this.loadData()
    },
    handleExportExcel() {
      this.queryData.queryRange = ''
      if (this.queryData.proxyRange == 1) {
        delete this.queryData.proxyName
      }
      if (this.queryData.proxyRange == 2 && !this.queryData.proxyName) {
        this.$message.warning('请输入代理账号')
      }
      for (const index in this.checkedCities) {
        const e = this.checkedCities[index]
        const len = this.checkedCities.length - 1
        if (e == '仅看自身') {
          this.queryData.queryRange += '3'
        } else if (e == '直属下级') {
          this.queryData.queryRange += '2'
        } else if (e == '全部下级') {
          this.queryData.queryRange += '5'
        }
        if (index != len) {
          this.queryData.queryRange += ','
        }
      }
      if (this.checkedCities.length == 0) {
        this.queryData.queryRange = '2,3,5' // 全不选 等于 全选
      }
      const params = {
        ...this.queryData
      }
      if ([1, 2, 3, 4, 5].includes(params.periodType)) {
        delete params.cycleStartDate
        delete params.cycleEndDate
      } else {
        delete params.periodType
        params.cycleEndDate = this.billDateList[this.queryData.billEndDate].periodEnDate
        params.cycleStartDate = this.billDateList[this.queryData.billEndDate].periodStDate
      }
      delete params.billEndDate
      this.exportBtnLoading = true
      this.exportExcelPublic({
        api: 'proxyTeamBillExport',
        params
      }).finally(() => {
        this.exportBtnLoading = false
      })
    },
    // 提交列设置数据
    handleOrderList() {
      this.colSettings.visible = false
      const uu_Id = this.$store.state.user.userInfo.id
      const uidKey = uu_Id + '_commonTableKey_agentTeamBill'
      const getLocalTableData = Storage.get('commonTableKey')
      if (getLocalTableData) {
        Storage.set(
          'commonTableKey',
          Object.assign(getLocalTableData, {
            [uidKey]: this.oldCol
          })
        )
        this.oldCol = getLocalTableData[uidKey]
      } else {
        Storage.set('commonTableKey', {
          [uidKey]: this.oldCol
        })
      }
    },
    // 打开列设置弹框
    openColSettings() {
      this.colSettings.visible = true
    },
    // 取消列设置
    cancleSetColumn() {
      this.colSettings.visible = false
      this.colSettings.visible = false
      const getLocalTableData = Storage.get('commonTableKey')
      const uu_Id = this.$store.state.user.userInfo.id
      const uidKey = uu_Id + '_commonTableKey_agentTeamBill'
      if (getLocalTableData && getLocalTableData[uidKey]) {
        this.oldCol = getLocalTableData[uidKey]
      } else {
        this.oldCol.map((item, index) => {
          item.isShow = true
        })
      }
    },
    // 复原缺省
    clickDel() {
      this.oldCol.map((item, index) => {
        item.isShow = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tips-box {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -12px;
}
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
.input-with-select {
	width: 110px;
}
.ptop {
	padding-top: 2px;
	margin-left: 10px;
}
::v-deep .el-icon-question:after {
	font-size: 16px;
	margin-left: 0;
}
</style>
